@charset "utf-8";

/*
    Project 2
    Author: Zoe Griffith
    Date:   12/10/25
    
    Filename: csscalendar.css
*/


/* =================================================
   Tablet and Desktop
   =================================================
*/
@media only screen and (min-width: 641px) {
table {
    border: 3px inset #2A2357;
    border-collapse: collapse;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    table-layout: fixed;
    width: 85%;
}
table th, table td {
    border: 1px solid #2A2357;
    font-size: 0.85em;
    font-weight: normal;
    padding: 2px;
    vertical-align: top;
    width: 14.28%;
    word-wrap: break-word;
}
table td:nth-child(even) {
    background: #d99b9b;
}
table td:nth-child(odd) {
    background: #a5d99b;
}
table caption {
    caption-side: top;
    text-align: center;
    padding-bottom: 10px;
    font-size: 1.2em;
}
thead th {
    background: linear-gradient(#2A2357,#453a8f);
    color: #e9ccff;
}
}

/* =================================================
   Mobile
   =================================================
*/
@media only screen and (max-width: 640px) {
table#calendar, tbody, tr, td, caption {
    display: block;
}
td {
    border: 1px solid #2A2357;
    min-height: 80px;
}
tr {
    margin-top: 6px;
}
caption {
    font-weight: bold;
    text-decoration: underline;
    margin-top: 5px;
}
th, h5 {
    display: none;
}
td::before {
    content: attr(data-date);
    display: block;
    font-weight: bold;
    text-decoration: underline;
}
table td:nth-child(even) {
    background: #d99b9b;
}
table td:nth-child(odd) {
    background: #a5d99b;
}
}